<template>
  <section class="main">
    <div class="title">
      <span>基本信息</span>
      <div>
        <el-button icon="el-icon-edit" @click="modifyData"></el-button>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container container1">
      <div class="itemBox">
        <div class="line">
          <div>业务经理名称</div>
          <div>{{merchantinfo.name}}</div>
        </div>
        <div class="line">
          <div>身份证号</div>
          <div>{{merchantinfo.idnum}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>所属服务商</div>
          <div>{{merchantinfo.agentName}}</div>
        </div>
        <div class="line">
          <div>手机号</div>
          <div>{{merchantinfo.phone}}</div>
        </div>
        
      </div>
    </div>
    <!-- 支付通道 -->
    <div class="title">
      <span>支付&通道</span>
      <div>
        <el-button icon="el-icon-refresh" @click="refresh"></el-button>
      </div>
    </div>
    <div class="container container1">
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="index" align="center" label="序号"></el-table-column>
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="channelName" align="center" label="通道名称"></el-table-column>
          <el-table-column prop="wxProfitRate" align="center" label="微信成本(万分比)">
            <template slot-scope="scope">
              <div>{{(scope.row.wxProfitRate)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="aliProfitRate" align="center" label="支付宝成本(万分比)">
            <template slot-scope="scope">
              <div>{{(scope.row.aliProfitRate)}}</div>
            </template>
          </el-table-column>
           <el-table-column align="center" label="云闪付成本">
            <template slot-scope="scope">
              <div>{{scope.row.uniProfitRate}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="银行卡成本">
            <template slot-scope="scope">
              <div>信用卡成本万分比：{{scope.row.creditcardProfitRate}}</div>
              <div>储蓄卡成本万分比：{{scope.row.debitcardProfitRate}}</div>
              <div>封顶费用（元）：{{scope.row.debitcardTopFee/100}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="翼支付成本">
            <template slot-scope="scope">
              <div>{{scope.row.bestpayProfitRate}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数字人民币成本">
            <template slot-scope="scope">
              <div>{{scope.row.ecnyProfitRate}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="龙支付成本">
            <template slot-scope="scope">
              <div>{{scope.row.longpayProfitRate}}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="结算比例">
            <template slot-scope="scope">
              <div>{{scope.row.percent}}%</div>
            </template>
          </el-table-column>

          <el-table-column fixed="right" align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="costs(scope.row)">修改成本</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 标签 -->
    <div class="title" v-if="this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 8 ||this.rolesId == 9">
      <span>标签</span>
      <div>
        <el-button type="primary" @click="popuptag">添加标签</el-button>
      </div>
    </div>
    <div class="container container1" v-if="this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 8 ||this.rolesId == 9">
        <el-tag class="el_tag"
            v-for="item in adm_tag"
            closable
             @close="handleClose(item.key)"
            :key="item.label"
            effect="plain">
            {{ item.label }}
        </el-tag>
        <el-tag class="el_tag"
            v-for="item in cw_tag"
            closable
             @close="handleClose(item.key)"
             type="success"
            :key="item.label"
            effect="plain">
            {{ item.label }}
        </el-tag>
        <el-tag class="el_tag"
            v-for="item in fws_tag"
            closable
             @close="handleClose(item.key)"
             type="warning"
            :key="item.label"
            effect="plain">
            {{ item.label }}
        </el-tag>
    </div>


    <!-- 渠道配置 -->
    <el-dialog v-dialogDrag title="渠道配置" :visible.sync="Channeldeploy" width="45%" :close-on-click-modal='false'>
      <el-transfer v-model="value1" :data="data" :titles="['未拥有', '已拥有']"></el-transfer>
      <div style="width:100%;text-align:right;margin-top:30px;">
        <el-button type="primary" @click="Channeldeploy = false">取消</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </el-dialog>
    <!-- 修改成本 -->
    <el-dialog v-dialogDrag title="修改费率" :visible.sync="cost" width="35%" :close-on-click-modal='false'>
      <el-form :model="rate" status-icon label-width="110px" class="demo-dynamic">
        <el-form-item label="微信">
          <el-select width="100" v-model="rate.wxProfitRate" placeholder="请选择微信成本">
            <el-option v-for="(value,index) in wxList" :key="index" :label="value.rate" :value="value.rate"></el-option>
          </el-select> <span>（‰）</span>
        </el-form-item>
        <el-form-item label="支付宝">
          <el-select width="100" v-model="rate.aliProfitRate" placeholder="请选择支付宝成本">
            <el-option v-for="(value,index) in aliList" :key="index" :label="value.rate" :value="value.rate"></el-option>
          </el-select> <span>（‰）</span>
        </el-form-item>
         <el-form-item label="云闪付">
          <el-select width="100" v-model="rate.uniProfitRate" placeholder="请选择云闪付成本">
            <el-option v-for="(value,index) in uniList" :key="index" :label="value.rate" :value="value.rate"></el-option>
          </el-select> <span>（‰）</span>
        </el-form-item>
        <el-form-item label="信用卡">
          <el-input type="text" v-model="rate.creditcardProfitRate" placeholder="请输入信用卡成本（万分比）" oninput = "value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></el-input><span>（万分比）</span>
        </el-form-item>
        <el-form-item label="储蓄卡">
          <el-input type="text" v-model="rate.debitcardProfitRate" placeholder="请输入储蓄卡成本（万分比）" oninput = "value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></el-input><span>（万分比）</span>
        </el-form-item>
        <el-form-item label="封顶">
          <el-input type="text" :min="0" :max="10" :maxlength='5' v-model="rate.debitcardTopFee" placeholder="请输入储蓄卡封顶金额（元）" oninput = "value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"></el-input><span>（元）</span>
        </el-form-item>
        <el-form-item label="结算比例">
          <el-input type="text" v-model="rate.percent" placeholder="请输入结算比例(输入0-100之前的整数即可)" oninput = "value=value.replace(/[^\d{1,}\d{1,}|\d{1,}]/g,'')"></el-input><span>（%）</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cost = false">取消</el-button>
        <el-button type="primary" @click="submitRates()">确定</el-button>
      </span>
    </el-dialog>
   
    <!-- 修改业务经理 -->
    <el-dialog v-dialogDrag title="修改业务经理" :visible.sync="visible1" width="30%" :close-on-click-modal='false'>
      <el-form
        :model="alterService"
        status-icon
        label-width="150px"
        class="demo-dynamic"
      >
        <el-form-item label="所属服务商：">
          <el-input type="text" v-model="alterService.agentName" :disabled="true" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="业务经理名称：" :required="true">
          <el-input type="text" v-model="alterService.name"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :required="true" label="身份证号：">
          <el-input type="text" v-model.trim="alterService.idnum"   autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :required="true" label="手机号：">
          <el-input type="text" v-model.trim="alterService.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible1 = false">取消</el-button>
        <el-button type="primary" @click="reviseBusiness()">确定</el-button>
      </span>
    </el-dialog>
    <br>
    <!-- 标签配置 -->
    <el-dialog v-dialogDrag title="添加标签" :visible.sync="Channeldeploy1" width="35%" :close-on-click-modal='false'>
      <el-transfer 
       v-model="usedTags" 
       :data="unUsedTags"
       :titles="['未选标签', '已选择标签']" 
       filterable
       filter-placeholder="请输入关键词"
       >
      </el-transfer>
      <div style="width:100%;text-align:right;margin-top:30px;">
        <el-button type="primary" @click="Channeldeploy1 = false">取消</el-button>
        <el-button type="primary" @click='addLabel()'>确定</el-button>
      </div>
    </el-dialog>
    <br>
  </section>
</template>

<script>
import { merchantdetails, channel, getBdData, reviseBusiness, getPaymentList, getRateList, postSubmitRates, getdimensionTagList, getSelectTagsByRole, postDimensionTagSave, postDimensionTagRemove } from "@/api/api";
export default {
  data() {
    return {
      routerDataId: '',
      merchantinfo: {
        name:'',
        agentName:'',
        idnum:'',
        phone:'',
      },
      vdata:[],
      //修改业务经理
      visible1: false,
      alterService:{
        name:'',
        agentName:'',
        idnum:'',
        phone:'',
        agentid:''
      },
      wxList:[],//微信费率
      aliList:[],//支付宝费率
      uniList:[],
      rate: { //修改费率
        id:'',
        wxProfitRate: "",//微信
        aliProfitRate:'',//支付宝
        uniProfitRate:'', //云闪付
        creditcardProfitRate:'',//信用卡
        debitcardProfitRate:'',//储蓄卡
        debitcardTopFee:'',//封顶费用
        percent:''//结算比例
      },
      state: "1",
      note: "",
      data: [
        { key: "1", label: "上海" },
        { key: "2", label: "北京" },
        ,
        { key: "3", label: "武汉" },
        { key: "4", label: "美国" },
        { key: "5", label: "大大" }
      ],
      Channeldeploy: false,
      cost: false,
      account: false,
      costarr: {
        category: ""
      },
      accountarr:{

      },
      value1: ["1", "2", "3"],
      merchantarr: [],
      adm_tag:[],//超管 运营标签
      cw_tag:[],//财务标签
      fws_tag:[],//服务商标签
      tag_color:'',//标签颜色
      Channeldeploy1: false, //添加标签穿梭框开关
      unUsedTags:[],//添加标签穿梭框 未选择的标签
      usedTags:[],//添加标签穿梭框 已选择的标签
      agentname:'',//服务商名称
      rolesId:''
    };
  },
  watch:{ //监听路由变化
    // $route(to){
    //   if(to.fullPath.indexOf("bdinfo") == -1 ){
    //     return false
    //   }
    //     let id = this.$route.query.no
    //     getBdData({},id).then(res => {
    //       if(res.code == 405){
    //           sessionStorage. removeItem('token')
    //           this.$router.push('/login');
    //       }else{
    //         this.merchantinfo.name = res.data.name
    //         this.merchantinfo.agentName = res.data.agentName
    //         this.merchantinfo.idnum = res.data.idnum
    //         this.merchantinfo.phone = res.data.phone
    //         this.vdata = res.data
    //       }
    //     })
    //     getPaymentList({
    //       type: 3,
    //       fid: id
    //     }).then(res => {
    //       if(res.code == 200){
    //         this.merchantarr = res.data
    //       }
    //     })
    // }
  },
  created() {
    this.routerDataId = sessionStorage.getItem('bdlist_id')
    // this.agentname = JSON.parse(sessionStorage.getItem("bdlist_agentname"))
    var aaa = sessionStorage.getItem('userInfo')
    var bbb = JSON.parse(aaa)
    this.rolesId = bbb.rolesId
    this.getRouterData()
    this.getPaymentList()
    if(this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 8 ||this.rolesId == 9){
      this.getdimensionTagList()//获取指定对象已拥有的标签
    }
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 刷新
    refresh (){
      this.$router.go(0);
    },
    getRouterData(){
      getBdData({},this.routerDataId).then(res => {
        if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
        }else{
          console.log(res)
          // this.parentid = res.data.parentid
          this.merchantinfo.name = res.data.name
          this.merchantinfo.agentName = res.data.agentName
          this.merchantinfo.idnum = res.data.idnum
          this.merchantinfo.phone = res.data.phone
          this.vdata = res.data
          this.agentname = res.data.name
        }
      })
    },
    //获取支付列表数据
    getPaymentList(){
      console.log(this.routerDataId)
      getPaymentList({
        type: 3,
        fid: this.routerDataId
      }).then(res => {
        if(res.code == 200){
          this.merchantarr = res.data
        }
      })
    },
    modifyData(){
      this.visible1 = true
      
      this.alterService.name = this.vdata.name
      this.alterService.agentName = this.vdata.agentName
      this.alterService.idnum = this.vdata.idnum
      this.alterService.phone = this.vdata.phone
      this.alterService.agentid = this.vdata.agentid
    },
    //修改业务经理
    reviseBusiness(){
      reviseBusiness({
        name: this.alterService.name,
        idnum: this.alterService.idnum,
        phone: this.alterService.phone,
        agentid: this.alterService.agentid
      },this.routerDataId).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.visible1 = false
          this.getRouterData()
        }else{
          this.$message.error(res.message);
        }
      })
    },
    //   渠道配置
    Channeldeploys() {
      this.Channeldeploy = true;
    },
    // 修改成本
    costs(v) {
      console.log(v.type)
      this.cost = true;
       getRateList({
        fid: v.fid,
        channelType: v.channelType,
        type: v.type,
        payType: '400',
      }).then(res => {
        if(res.code == 200){
          // console.log(res)
          this.wxList = []
          // this.wxList = res.data
          for(var i = 0; i < res.data.length; i++){
              this.wxList.push({id: res.data[i].id,rate: (res.data[i].rate)})
          }
          // // console.log(this.wxList)
          // this.aliList = []
          // // this.aliList = res.data
          // for(var i = 0; i < res.data.length; i++){
          //     this.aliList.push({id: res.data[i].id,rate: (res.data[i].rate)})
          // }
          // this.uniList = []
          // for(var i = 0; i < res.data.length; i++){
          //     this.uniList.push({id: res.data[i].id,rate: (res.data[i].rate)})
          // }
        }else{
          this.$message.error(res.message);
        }
      })
      getRateList({
        fid: v.fid,
        channelType: v.channelType,
        type: v.type,
        payType: '300',
      }).then(res => {
        if(res.code == 200){
          this.aliList = []
          // this.aliList = res.data
          for(var i = 0; i < res.data.length; i++){
              this.aliList.push({id: res.data[i].id,rate: (res.data[i].rate)})
          }
        }else{
          this.$message.error(res.message);
        }
      })
       getRateList({
        fid: v.fid,
        channelType: v.channelType,
        type: v.type,
        payType: '600',
      }).then(res => {
        if(res.code == 200){
           this.uniList = []
          for(var i = 0; i < res.data.length; i++){
              this.uniList.push({id: res.data[i].id,rate: (res.data[i].rate)})
          }
        }else{
          this.$message.error(res.message);
        }
      })
      this.rate.id = v.id
      this.rate.wxProfitRate = v.wxProfitRate
      this.rate.aliProfitRate = v.aliProfitRate
      this.rate.uniProfitRate = v.uniProfitRate
      this.rate.creditcardProfitRate = v.creditcardProfitRate
      this.rate.debitcardProfitRate = v.debitcardProfitRate
      this.rate.debitcardTopFee = v.debitcardTopFee/100
      this.rate.percent = v.percent
      // for(var i = 0; i < this.wxList.length;i++){
      //   if(v.wxProfitRateCode == this.wxList[i].id){
      //     this.rate.wxProfitRate = this.wxList[i].id
      //   }
      // }
      // for(var i = 0; i < this.aliList.length;i++){
      //   if(v.aliProfitRateCode == this.aliList[i].id){
      //     this.rate.aliProfitRate = this.aliList[i].id
      //   }
      // }
    },
    //提交修改费率
    submitRates(){
      if(this.rate.debitcardTopFee >100 || this.rate.debitcardTopFee < 0){
        this.$message.error({
          message:"储蓄卡封顶费用范围为0~100元",
          type: 'success'
        })
        return false
      }
      postSubmitRates({
        wxProfitRate: this.rate.wxProfitRate,
        aliProfitRate: this.rate.aliProfitRate,
        uniProfitRate: this.rate.uniProfitRate,
        creditcardProfitRate: this.rate.creditcardProfitRate,
        debitcardProfitRate: this.rate.debitcardProfitRate,
        debitcardTopFee: Math.round(this.rate.debitcardTopFee*100),
        percent: this.rate.percent,
      },this.rate.id).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.cost = false
          this.getRouterData()
          this.getPaymentList()
        }else{
          this.$message.error(res.message);
        }
      })
    },
    // 配置结算比例
    accounts(){
        this.account = true;
    },
    //显示添加标签弹框
    popuptag(){
      if(this.Channeldeploy1 === false){
        this.usedTags = []
      }
      this.Channeldeploy1 = true
      //获取指定对象可添加标签
      getSelectTagsByRole({
        fid: this.routerDataId,
        roleId: 4
      }).then(res => {
        if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        } else if(res.code == 200){
          if(this.unUsedTags.length == 0){
            for(var i = 0; i < res.data.allTags.length; i++){
              this.unUsedTags.push({key:res.data.allTags[i].id,label:res.data.allTags[i].name})
            }
          } 
          if(this.usedTags.length == 0){
            for(var i = 0; i < res.data.usedTags.length;i++){
              this.usedTags.push(res.data.usedTags[i].id)
            }
          }
          console.log(this.unUsedTags)
          console.log(this.usedTags)
        }else if(res.code == 500){
            this.$message.error(res.message);   
        }
      })
    },
    //获取指定对象已拥有的标签
    getdimensionTagList(){
      this.adm_tag = []
      this.cw_tag = []
      this.fws_tag = []
      getdimensionTagList({
        fid: this.routerDataId,
        roleId: 4
      }).then(res => {
        if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        } else if(res.code == 200){
            for(var i = 0; i < res.data.length; i++){
              if(res.data[i].tagCreatorRole == 1 ||res.data[i].tagCreatorRole == 8){
                this.adm_tag.push({key:res.data[i].id,label:res.data[i].tagName})
              }else if(res.data[i].tagCreatorRole == 9){
                this.cw_tag.push({key:res.data[i].id,label:res.data[i].tagName})
              }else if(res.data[i].tagCreatorRole == 2){
                this.fws_tag.push({key:res.data[i].id,label:res.data[i].tagName})
              }
            }
            // if(this.rolesId == 2){
            //   this.adm_tag = []
            //   this.cw_tag = []
            // }
        }else if(res.code == 500){
            this.$message.error(res.message);   
        }
      })
    },
    //给指定对象添加标签
    addLabel(){
      console.log(this.usedTags.join(','))
      var data = this.usedTags.join(',')
      postDimensionTagSave({
        ids: data,
        fid: this.routerDataId,
        roleId: 4,
        holder: this.agentname
      },this.routerDataId).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.Channeldeploy1 = false
          this.getdimensionTagList()
        }else if(res.code == 500){
          this.Channeldeploy1 = true
          this.$message.error(res.message)
        }
      })
    },
    handleClose(id){
      this.$confirm(`是否确定删除该标签？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          postDimensionTagRemove({},id).then(res =>{
            if(res.code == 405){
              sessionStorage. removeItem('token')
              this.$router.push('/login');
            }else if(res.code == 200){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getdimensionTagList()
            }else if(res.code == 500){
              this.$message.error(res.message);
            }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
    }
  },
};
</script>

<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container1 .itemBox {
  width: 50%;
}
.container1 .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container1 .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container1 .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .attachmentitem {
    width: 16.5%;
    text-align: center;
    margin-bottom: 20px;
    div {
      font-size: 14px;
      &:nth-child(1) {
        margin-bottom: 5px;
      }
    }
  }
}
.red {
  color: red;
}
.tableBox {
  width: 100%;
}
.el-input{
  width: 70%;
}
.el_tag{
  margin-right: 10px;
  margin-bottom: 5px;
}
</style>
